<template>
  <div class="step">
    <div v-for="(item, index) in steps" :key="index">
      <div><span class="value">+{{item.int}}</span></div>
      <div class="info">
        <div class="empty" v-if="index === 0"></div>
        <div class="line" v-if="index !== 0" :class="item.sign === 'yes' ? 'acitveLine': ''"></div>
        <img v-if="item.sign === 'yes'" src="/static/img/flower.png" mode="widthFix" alt="">
        <img v-else src="/static/img/flowerf.png" mode="widthFix" alt="">
        <div class="line" v-if="index < steps.length-1" :class="item.sign === 'yes' ? 'acitveLine': ''"></div>
      </div>
      <div class="title">{{item.date}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    props: {
      active: {
        type: Number,
        default: 0,
      },
      steps: {
        type: Array
      }
    }
  }
</script>

<style scoped>
  .step, .info {
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
	margin-top: 13rpx;
  }

  .step > div {
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }
  .empty{
    height: 1rpx;
    width: 31rpx;
    background: #ffffff;
  }
  .line {
    height: 1rpx;
    width: 31rpx;
    background: rgba(207, 207, 207, 1);
  }
  .acitveLine{
    background: #F85F23;
  }
  img {
    width: 38rpx;
    height: 38rpx;
    margin: 21rpx 0 21rpx 0;
    vertical-align: middle;
  }

  .value {
    padding: 3rpx 18rpx;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(124, 96, 0, 1);
    line-height: 20rpx;
    background: rgba(243, 224, 85, 1);
    border-radius: 12rpx;
  }

  .title {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(50, 50, 50, 1);
    line-height: 20rpx;
  }
</style>
